<template>
	<view :class="config.style">
		<FullscreenLoading :loading="loading"></FullscreenLoading>
		<view class="products-section">
			<view class="cover">
				<image mode="widthFix" :src="ordersInfo.products.cover_400" @error="imageError" class="image"></image>
			</view>
			<view class="info">
				<view class="title text-ellipsis-2">{{ordersInfo.products.title}}</view>
				<view class="description text-ellipsis">{{ordersInfo.productsdescription}}</view>
				<view class="price">
					<text class="price-title">价格：</text>
					<text>￥ {{ordersInfo.paid_fee}}</text>	
				</view>
			</view>
		</view>
		
		<view class="evaluate-section">
			<form @submit="formSubmit" @reset="formReset">
				<view>
					<Star :star="star" @submitStar="submitStar" />
				</view>
				<view v-if="!loading">
					<imgUpload :count="5" @submitImgs="submitImgs" :name="name" :header="header" :images="images"></imgUpload>
				</view>
				<view class="uni-title title">评价内容</view>
				<view class="uni-textarea textarea">
					<textarea name="content" placeholder-style="color:#666" show-confirm-bar="false" placeholder="请填写评价内容." :value="content" @input="textareaInput"/>
				</view>
				<view class="submit">
					<button class="button" hover-class="button-hover" type="default" maxlength="120" form-type="submit">确认提交</button>
				</view>
			</form>
		</view>
		
	</view>
</template>

<script>
	//全屏加载中
	import FullscreenLoading from '../../../components/muu-fullscreen-loading/muu-fullscreen-loading.vue'
	import ImgUpload from '@/components/muu-image-upload/muu-image-upload.vue'
	import Star from '../evaluate/star.vue'
	export default {
		components: {
			FullscreenLoading,
			ImgUpload,
			Star
		},
		data() {
			return {
				loading: true, //加载中
				config: {}, //站点配置
				urlParams: {}, //url传递过来的参数
				ordersInfo: {}, //订单数据
				/***********************/
				name: 'pic',
				url: '',
				header: {
						'content-type': 'multipart/form-data'
				},
				/***********************/
				star: [ //评分组件数组
					{name:'评分',total:5,value:5,ban:false,sum:0},
				], 
				/***********************/
				content: '',//评价内容
				value: 5, //默认评分
				images: [], //评价图片
			}
		},
		onLoad(option) {
			//获取url参数
			this.getUrlParam()
		},
		created() {
			this.getConfig()
		},
		methods: {
			
			/**
			 * 获取配置
			 */
			getConfig: function(){
				let that = this
				const config = uni.getStorageSync('config');
				if(config){
					that.config = config
				}else{
					//获取全局配置
					this.util.request({
						url : 'entry/wxapp/config',
						data: {
							'm' : 'muu_classroom'
						},
						success: function (res) {
							if (res.data.code == 200) {
								that.config = res.data.data
							}
						}
					})
				}
			},
			//获取url参数
			getUrlParam: function(){
				// #ifdef MP-WEIXIN
				//console.log('小程序端执行')
				let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
				let curRoute = routes[routes.length - 1].route //获取当前页面路由
				let curParam = routes[routes.length - 1].options; //获取路由参数
				// #endif
			
				// #ifdef H5
				let curParam = this.$route.query;
				// #endif
				this.urlParams = curParam
				console.log(curParam)
				this.getOrdersDetail()
				this.getEvaluateDetail()
			},
			/**
			 * 获取订单详情
			 */
			getOrdersDetail: function(){
				let that = this
				let data = {}
					data.action = 'orders'
					data.target = 'detail'
					data.order_no = this.urlParams.order_no
					
				//获取首页数据
				this.util.request({
					url : 'entry/wxapp/minishop',
					data : data,
					success: function (res) {
						if (res.data.code == 200) {
							that.ordersInfo = res.data.data
						}
					}
				})
			},
			
			/**
			 * 获取评价数据
			 */
			getEvaluateDetail: function(){
				let that = this
				let data = {}
					data.action = 'evaluate'
					data.target = 'detail'
					data.order_no = this.urlParams.order_no
				//获取首页数据
				this.util.request({
					url : 'entry/wxapp/minishop',
					data : data,
					success: function (res) {
						if (res.data.code == 200) {
							//console.log(res.data.data)
							that.star[0].value = res.data.data.value
							that.value = res.data.data.value
							if(parseInt(that.star[0].value) < parseFloat(that.star[0].value)){
								that.star[0].ban = true
							}
							//设置评价内容
							that.content = res.data.data.content
							//设置初始图片列表
							that.images = res.data.data.images
							//console.log(res.data.data.images)
							
						}else{
							//没有数据不在处理
						}
						that.loading = false
					}
				})
			},
			
			textareaInput: function(e){
				//console.log(e)
				this.content = e.detail.value
			},
			
			/**
			 * 评价图片组
			 * @param {Object} data
			 */
			submitImgs: function(data) {
				//console.log(data, "获取到的图片组" + data.length + "张")
				//处理图片数组
				let images = new Array()
				data.map(item=>{
					images.push(item.image)
				})
				//console.log(images)
				this.images = images
				console.log(this.images,'已上传的图片组')
			},
			
			/**
			 * 评分值获取
			 * @param {Object} data
			 */
			submitStar: function(data){
				//console.log(data, "获取评分")
				this.value = data[0]['value']
				console.log(this.value,'已设置的评分值')
			},
			
			/**
			 * 提交评价表单
			 * @param {Object} e
			 */
			formSubmit: function(e){
				let that = this
				console.log(this.content)
				if(!this.content){
					uni.showToast({
						title: '评价内容不能为空',
						icon: 'none',
						duration: 2000
					});
					return false
				}
				
				//提交数据
				this.util.request({
					url : 'entry/wxapp/minishop',
					data: {
						'action': 'evaluate',
						'target': 'edit',
						'order_no': that.urlParams.order_no,
						'content': that.content,
						'value': that.value,
						'images': that.images,
					},
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					success: function (res) {
						//console.log(res.data);
						if (res.data.code == 200) {
							uni.showModal({
								title: '温馨提示',
								content: res.data.msg,
								success: ()=> {
									uni.navigateBack()
								}
							})
						}else{
							uni.showToast({
							    title: res.data.msg,
							    duration: 2000
							});
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	/*订单商品信息*/
	.products-section {
		display: flex;
		padding: 10px;
		.cover {
			width: 140px;
			overflow: hidden;
			.image {
				border-radius: 5px;
				width: 100%;
				height: auto;
				display: block;
			}
		}
		.info {
			flex: 1;
			padding: 0 0 0 10px;
			.title {
				font-size: 14px;
				color: #000;
				font-weight: 600;
				height: 36px;
				line-height: 18px;
			}
			.description {
				color: #999;
				font-size: 12px;
			}
			.price {
				margin-top: 10px;
				font-size: 14px;
				text-align: right;
			}
			.exp-info {
				margin-top: 5px;
				color: #999;
				font-size: 12px;
				.item {
					display: inline;
					margin: 0;
					.num {
						margin: 0 5px;
					}
				}
			}
		}
	}
	
	.evaluate-section {
		padding: 10px;
		.title {
			font-size: 14px;
			line-height: 48px;
			font-weight: 700;
		}
		.textarea {
			
			border-radius: 5px;
			background-color: #f8f8f8;
			padding: 8px;
			font-size: 14px;
			margin-bottom: 10px;
			textarea {
				width: 100%;
			}

		}
		.submit {
			position: fixed;
			bottom: 10px;
			left: 10px;
			right: 10px;
			.button {
				display: block;
				color: #fff;
			}
			.button-hover {
				color: #fff;
			}
		}
	}
	
	/*页面风格设计*/
	.Blue {
		.price {
			color: $Blue;
		}
		.submit {
			.button {
				background-color: $Blue;
			}
			.button-hover {
				background-color: $Blue-hover;
			}
		}
	}
	.Green {
		.price {
			color: $Green;
		}
		.submit {
			.button {
				background-color: $Green;
			}
			.button-hover {
				background-color: $Green-hover;
			}
		}
	}
	.LightRed {
		.price {
			color: $LightRed;
		}
		.submit {
			.button {
				background-color: $LightRed;
			}
			.button-hover {
				background-color: $LightRed-hover;
			}
		}
	}
	.Orange {
		.price {
			color: $Orange;
		}
		.submit {
			.button {
				background-color: $Orange;
			}
			.button-hover {
				background-color: $Orange-hover;
			}
		}
	}
	.LightPink {
		.price {
			color: $LightPink;
		}
		.submit {
			.button {
				background-color: $LightPink;
			}
			.button-hover {
				background-color: $LightPink-hover;
			}
		}
	}
	.Magenta {
		.price {
			color: $Magenta;
		}
		.submit {
			.button {
				background-color: $Magenta;
			}
			.button-hover {
				background-color: $Magenta-hover;
			}
		}
	}
</style>
